<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
    :visibleContent2="true"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="form"
        label-width="90px"
        label-position="right"
      >
        <el-row>
        <el-col :span="12">订单信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="订单号:">
            <span>{{form.orderNo}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单状态:">
            <span>{{form.status}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售公司:">
            <span>{{form.secondPartyCompany}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售顾问:">
            <span>{{form.saleName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建日期:">
            <span>{{form.createdAt}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单总额:">
            <span>{{form.orderPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车款金额:">
            <span>{{form.loanAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="精品金额:">
            <span>{{form.specialAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="其他费用:">
            <span>{{form.elseFee}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="首付金额:">
            <span>{{form.downPaymentAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="尾款/贷款:">
            <span>{{form.tailAmount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="定金金额:">
            <span>{{form.depositAmount}}</span>
          </el-form-item>
        </el-col>
        </el-row>
      </el-form>
    </template>

    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="form"
        label-width="90px"
        label-position="right"
        :disabled="true"
      >
        <el-row class=''>
          <el-col :span="12">客户信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户姓名:">
              <span>{{form.clientName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际车主:">
              <span>{{form.actualOwner}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车主手机:">
              <span>{{form.clientPhone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车主身份证:">
              <span>{{form.identity}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <template #contentPanel2>
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="selectedType">
            <el-radio-button :label="1">整车</el-radio-button>
            <el-radio-button :label="2">金融</el-radio-button>
            <el-radio-button :label="3">保险</el-radio-button>
            <el-radio-button :label="4">置换</el-radio-button>
            <el-radio-button :label="5">精品</el-radio-button>
            <el-radio-button :label="6">其它</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-form :inline="true" label-width="100px" label-position="right">
        <el-row v-if="selectedType == 1">
          <el-col :span="6">
            <el-form-item label="品牌:">
              <span>{{form.carBrandName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车系:">
              <span>{{form.carSeriesName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车型:">
              <span>{{form.carModelName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车身色:">
              <span>{{form.carColor}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="内饰色:">
              <span>{{form.inColor}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="市场指导价:">
              <span>{{form.guidancePrice}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车辆成交价:">
              <span>{{form.salePrice}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="国产/进口:">
              <span>{{form.importedOrDomestic}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车架号:">
              <span>{{form.vin}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="selectedType == 2">
          <el-col :span="6">
            <el-form-item label="首付比例:">
              <span>{{form.paymentRatio}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="贷款比例:">
              <span>{{form.loanBilinear}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="贷款期数:">
              <span>{{form.loanNumber}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="贷款机构:">
              <span>{{form.loanCompany}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="贷款金额:">
              <span>{{form.loanAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际贷款金额:">
              <span>{{form.actualLoanAmount}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="selectedType == 3">
          <data-table
            :value="insuranceTableData"
            :total-count="totalCount"
            :has-action="false"
            :table-column-attributes="insuranceTableColumnAttributes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :width="160"
          >
            <template #action="{ row }">
              <i
                class="el-icon-edit"
                title="修改"
                style="margin-left: 15px; cursor: pointer"

                @click="updateUser(row)"
              ></i>
              <i title="详情" class="el-icon-view"></i>
              <i title="销售清单详情" class="el-icon-document"></i>
              <i title="配车" class="el-icon-key"></i>
              <i title="完结" class="el-icon-success"></i>
              <i title="作废" class="el-icon-delete"></i>
            </template>
          </data-table>
        </el-row>

        <el-row v-if="selectedType == 4">
          <el-col :span="6">
            <el-form-item label="置换类型:">
              <span>{{form.zhType}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="置换价格:">
              <span>{{form.replacementPrice}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="置换车型:">
              <span>{{form.zhModelName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交车时间:">
              <span>{{form.swopTime}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="selectedType == 5">
          <data-table
            :value="form.domains"
            :total-count="totalCount"
            :has-action="true"
            :table-column-attributes="boutiqueTableColumnAttributes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :width="160"
          >
            <template #action="{ row }">
              <i
                class="el-icon-edit"
                title="修改"
                style="margin-left: 15px; cursor: pointer"

                @click="updateUser(row)"
              ></i>
              <i title="详情" class="el-icon-view"></i>
              <i title="销售清单详情" class="el-icon-document"></i>
              <i title="配车" class="el-icon-key"></i>
              <i title="完结" class="el-icon-success"></i>
              <i title="作废" class="el-icon-delete"></i>
            </template>
          </data-table>
        </el-row>

        <el-row v-if="selectedType == 6">
          <el-col :span="6">
            <el-form-item label="上户费:">
              <span>{{form.wealthyFamily}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调查费:">
              <span>{{form.investigationFee}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购置税:">
              <span>{{form.purchaseTax}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代缴费:">
              <span>{{form.paymentOnBehalf}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="按揭抵押费:">
              <span>{{form.loanMortgage}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="利息:">
              <span>{{form.interest}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="续保预存金:">
              <span>{{form.deposit}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手续费:">
              <span>{{form.serviceCharge}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="综合服务费:">
            <span>{{form.serviceMoney}}</span>
          </el-form-item>
        </el-col>
          <el-col :span="6">
            <el-form-item label="金融盗抢包:">
              <span>{{form.robbery}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from "@/mixins/base";
import { detailById } from '@/api/pre-sale/orderManagement/newCar'
export default {
  components: {},
  mixins: [baseMixin({})],
  data() {
    return {
      form: {
        domains: []
      },
      selectedType: 1,
      insuranceTableData: [],
      insuranceTableColumnAttributes: [
        { name: '险种', value: 'orderNo', type: 'text' },
        { name: '保险名称', value: 'name', type: 'text' },
        { name: '保费', value: 'appLargeIdOneValue', type: 'text' },
      ],
      boutiqueTableData: [],
      boutiqueTableColumnAttributes: [
        { name: '精品类型', value: 'type', type: 'text', render: (row, value) => {
            if (value == 1) {
              return '销售'
            } else if (value == 2) {
              return '赠送'
            } else if (value == 3) {
              return '打包'
            }
            return '未知'
          }, },
        { name: '名称', value: 'detailName', type: 'text' },
        { name: '单价', value: 'detailPrice', type: 'text' },
        { name: '数量', value: 'detailCount', type: 'text' },
        { name: '折扣比例', value: 'discount', type: 'text' },
        { name: '折后金额', value: 'price', type: 'text' },
      ]

    };
  },
  mounted() {
    let { id } = this.$route.query;
    if (id) {
      this.form.id = id;
      detailById(id).then((res) => {
        let { success, data } = res;
        if (success) {
          this.form = {...data};
        }
      });
    }
  },
  methods: {},
};
</script>
<style lang="scss" scoped></style>
